@field-width: 350px;
@grid-spacing: 10px;
@grid-row-cells: 7; //行
@grid-col-cells: 10; //列
@tile-size: (
  (@field-width - @grid-spacing * (@grid-row-cells + 1)) / @grid-row-cells
);
@tile-border-radius: 3px; //砖边框圆角
@tile-color: #eee4da;

.game-box {
  width: @tile-size* @grid-row-cells;
  height: @tile-size* @grid-col-cells;
  position: relative;
  background-color: transparent;

  .tile-container {
    width: @tile-size* @grid-row-cells;
    height: @tile-size* @grid-col-cells;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .tile {
      position: absolute;
      width: round(@tile-size);
      height: round(@tile-size);

      &::after {
        content: "";
        position: absolute;
        width: @tile-size;
        height: @tile-size;
        border-radius: @tile-border-radius;
        background: @tile-color;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      @icon-num: 10; //10种图片

      .set-icon(@x, @icon-num) when (@x <= @icon-num) {
        @selector: ~"&.tile-icon@{x}";
        @{selector} {
          background-image: url("./images/icon@{x}.png");
          background-repeat: no-repeat;
          background-size: 90% 90%;
          background-position: center center;
        }
        .set-icon(@x + 1, @icon-num);
      }
      .set-icon(1, @icon-num);

      // 计算砖位置，两层循环
      .build-position(@x, @y, @grid-row-cells,@grid-col-cells) {
        // 外层循环，判断 x 是否小于等于网格行数
        & when (@x < @grid-row-cells) {
          // 内层循环，判断 y 是否小于等于网格列数
          & when (@y < @grid-col-cells) {
            // Less 不支持直接在类名中使用变量插值,使用~生成动态选择器
            @selector: ~"&.tile-position-@{x}-@{y}";
            @{selector} {
              left: @tile-size* @x;
              top: @tile-size* @y;
            }
            .build-position(@x, @y + 1, @grid-row-cells,@grid-col-cells);
          }
          .build-position(@x + 1, @y, @grid-row-cells,@grid-col-cells);
        }
      }
      .build-position(0, 0, @grid-row-cells,@grid-col-cells);

      &.light {
        border: 2px solid #fffb00;
      }
    }

    .line_y {
      position: absolute;
      background-repeat: no-repeat;
      background-color: rgb(255, 255, 0);
      visibility: visible;
      z-index: 100;
    }

    .line_x {
      position: absolute;
      background-repeat: no-repeat;
      background-color: rgb(89, 255, 0);
      visibility: visible;
      z-index: 100;
    }
  }
}
